<template>
  <div class="bucket-mgr">
    <div class="bucket-mgr__item" v-for="item in list">
      <div class="bucket-mgr__item__num" @click="setChecked(item)">订单号：{{item.id}}</div>
      <div class="bucket-mgr__item__row" @click="setChecked(item)">
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_tit">下单时间：</div>
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_info">{{item.time}}</div>
        <div class="bucket-mgr__item__row__el_check">
          <van-checkbox v-model="item.checked"></van-checkbox>
        </div>
      </div>
      <div class="bucket-mgr__item__row" @click="setChecked(item)">
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_tit">总欠款金额：</div>
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_info">{{totalPrice(item.debtsList)}}</div>
      </div>
      <div class="bucket-mgr__item__row bucket-mgr__item__row_control">
        <van-button type="default" size="small" @click="goDetail(item)">详情</van-button>
      </div>
    </div>
    <div class="bottom-btn">
      <van-button type="info" @click="payMoney" :disabled="canPay">{{btnText}}</van-button>
    </div>
  </div>
</template>

<script>
  import {
    MONEY_DEBT_LIST,
    REPAY_MONEY
  } from '@/api/user';
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['stationInfo']),
      canPay() {
        let flag = true;
        this.list.forEach(el => {
          if (el.checked) {
            flag = false;
            return false;
          }
        });
        return flag;
      },
      btnText() {
        let count = 0;
        this.list.forEach(el => {
          if (el.checked) {
            el.debtsList.forEach(item => {
              count += item.sum;
            });
          }
        });

        if (count !== 0) {
          return `一键还款（总计${count}元）`
        } else {
          return `一键还款`
        }
      }
    },
    data() {
      return {
        list: [],

      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //查看详情
      goDetail(item) {
        this.$router.push({
          path: 'waterMoneyManagementDetail',
          query: {
            item: item,
            type: 'debt'
          }
        })
      },
      getList() {
        this.$reqPost(MONEY_DEBT_LIST, {
          stationId: this.stationInfo.id
        }).then(res => {
          res.rows.forEach(element => {
            element.checked = false
          });
          this.list = res.rows;
          if (this.list.length == 0) {
            this.$toast('暂无数据')
          }
        });
      },
      setChecked(item) {
        item.checked = !item.checked;
      },
      //还款
      payMoney() {
        let list = [];
        this.list.forEach(el => {
          if (el.checked) {
            let sum = 0;
            el.debtsList.forEach(el => {
              sum += el.sum;
            });
            list.push({
              status: 0,
              stationId: el.stationId,
              orderId: el.id,
              sum: sum
            })
          }
        });

        if (list.length !== 0) {
          let param = {
            deptVoList: list,
            openid: this.stationInfo.openid
          }
          this.$reqPost(REPAY_MONEY, param).then(res => {
            if (res.code == '200' && res.data.prepayId) {
              let params = res.data;
              params.type = 'debtList';     //还款成功后返回列表标识
              this.$router.push({
                name: 'stockPay',
                params: params
              });
            } else {
              this.$toast('操作失败');
            }
          })
        } else {
          this.$toast('请勾选还款的订单');
        }
      },
      //欠款总金额
      totalPrice(list) {
        let count = 0;
        list.forEach(el => {
          count += el.sum;
        });
        return count + '元';
      }
    },
    watch: {
      list: {
        handler() {

        },
        deep: true
      }
    }
  }

</script>

<style lang="less" scoped>
  .bucket-mgr__item__row__el_check {
    position: absolute;
    right: 0;
    top: -100%;
    transform: translateY(4px);
  }

</style>
